<template>
  <div>
    <ul>
      <router-link tag="li" v-for="lis in list" :key="lis.name" :to="lis.name">
        <i v-html="lis.meta.icon"></i>
        <span>{{ lis.meta.title }}</span>
      </router-link>
    </ul>
  </div>
</template>

<script>
import routes from '@/router/routes'
export default {
  name: 'appfooter',
  data () {
    return {
      list: routes.filter(rou => {
        return rou.meta.isNav === true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
ul {
  height: 60px;
  width: 100%;
  display: flex;
  padding-top: 5px;
  box-sizing: border-box;
  .router-link-exact-active,
  .router-link-active {
    color: #ff6633;
  }
  li {
    flex: 1;
    text-align: center;
    color: #999999;
    i {
      display: block;
      height: 32px;
      font-family: 'iconfont';
      font-size: 25px;
    }

    span {
      font-size: 12px;
    }
  }
}

@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_1254112_h78ret3gle5.eot');
  src: url('//at.alicdn.com/t/font_1254112_h78ret3gle5.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1254112_h78ret3gle5.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1254112_h78ret3gle5.woff') format('woff'), url('//at.alicdn.com/t/font_1254112_h78ret3gle5.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1254112_h78ret3gle5.svg#iconfont') format('svg');
}
</style>
